<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
</head>

<body>
    <button class="btn">登录</button>
</body>
<script>
    var btn = document.getElementsByClassName("btn")[0];

    // 每次点击 都会发送一个请求 
    // btn.onclick = function () {
    //     ajax({
    //         type: "post",
    //         url: "http://43.138.81.225/demo/php/login_account.php",
    //         data: {
    //             account: "a123123",
    //             pwd: 123123,
    //         },
    //         dataType: "json",
    //         success: function (result) {
    //             console.log(result);
    //         }
    //     })
    // }

    // 防抖处理  => 如果短时间内连续触发多次 => 只执行最后一次
    // 缺点: 1. 声明了一个全局变量 2. 代码无法复用(其他地方用 => 只能重写一个新的)
    // var timer = null;
    // btn.onclick = function () {
    //     clearTimeout(timer);  // 如果300ms内连续触发 先清除上一个在启动一个新的
    //     timer = setTimeout(function () { // 将我们的操作 推迟300ms执行
    //         ajax({
    //             type: "post",
    //             url: "http://43.138.81.225/demo/php/login_account.php",
    //             data: {
    //                 account: "a123123",
    //                 pwd: 123123,
    //             },
    //             dataType: "json",
    //             success: function (result) {
    //                 console.log(result);
    //             }
    //         })
    //     }, 300);
    // }

    // 函数防抖
    function debounceFn(callback, delay = 0) {
        var timer = null;
        return function () {
            clearTimeout(timer);  // 如果300ms内连续触发 先清除上一个在启动一个新的
            timer = setTimeout(function () { // 将我们的操作 推迟300ms执行
                // callback();
                callback.apply(this, arguments); //callback在执行时 依存的newFn的参数和this指向
            }, delay);
        }
    }

    var newFn = debounceFn(function () { //回调函数
        ajax({
            type: "post",
            url: "http://43.138.81.225/demo/php/login_account.php",
            data: {
                account: "a123123",
                pwd: 123123,
            },
            dataType: "json",
            success: function (result) {
                console.log(result);
            }
        })
    }, 300);

    btn.onclick = newFn;


    // 函数节流  =>  如果传入的回调函数短时间内连续触发 => 降低执行的频率
    // 防抖     =>   如果传入的回调函数短时间内连续触发 => 只执行最后一次




</script>

</html>